<template>
	<view class="pageview">
		<cl-navbar :title="$t('my_file.setting.notification.title')" leftIconSize="40rpx" placeholder autoBack>
		</cl-navbar>
		<view class="pageContent">
			<view class="cellviewGrop" @click="settingNav">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("my_file.setting.notification.newSystemMessage")}}</text>
					</view>
					<view class="cellview__right">
						<text class="cellview__right__content">{{$t("my_file.setting.notification.goToSettings")}}</text>
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('my_file.setting.notification.newMessage')}}</text>
					</view>
					<view class="cellview__right">
						<u-switch v-model="notifs.stopNewMsg" asyncChange  @change="e=>setChange('stopNewMsg',e)" size="20"
							:activeValue="0" :inactiveValue="1"></u-switch>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("my_file.setting.notification.messageDetails")}}</text>
					</view>
					<view class="cellview__right">
						<u-switch v-model="notifs.stopMsgDel" asyncChange  @change="e=>setChange('stopMsgDel',e)" size="20"
							:activeValue="0" :inactiveValue="1"></u-switch>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('my_file.setting.notification.disturb')}}</text>
					</view>
					<view class="cellview__right">
						<u-switch v-model="notifs.disturb" asyncChange  @change="e=>setChange('disturb',e)" size="20"
							:activeValue="1" :inactiveValue="0"></u-switch>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('my_file.setting.notification.audio')}}</text>
					</view>
					<view class="cellview__right">
						<u-switch v-model="notifs.stopAudio" asyncChange  @change="e=>setChange('stopAudio',e)" size="20"
							:activeValue="0" :inactiveValue="1"></u-switch>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('my_file.setting.notification.vibration')}}</text>
					</view>
					<view class="cellview__right">
						<u-switch v-model="notifs.stopVibration" asyncChange  @change="e=>setChange('stopVibration',e)" size="20"
							:activeValue="0" :inactiveValue="1"></u-switch>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const syczuanNotice = uni.requireNativePlugin("syczuan-notice");
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'my_setting_notification',
		data() {
			return {
				notifs:{
					stopNewMsg:0,//0是开启1是关闭，为了默认值开启，所以就不用登录后赋值了
					stopMsgDel:0,//0是开启1是关闭，为了默认值开启，所以就不用登录后赋值了
					disturb:0,//0是关闭1是开启，为了默认值关闭，所以就不用登录后赋值了
					stopVibration:0,//0是开启1是关闭，为了默认值开启，所以就不用登录后赋值了
					stopAudio:0,//0是开启1是关闭，为了默认值开启所以就不用登录后赋值了
				}
			}
		},
		computed: {
			...mapState({
				user_info: state => state.user.user_info,
			})
		},
		onLoad() {
			let user_id = this.user_info.user_id
			if(user_id){
				let notif = user_id+'notif'
				let notifsStorage = uni.getStorageSync(notif)
				if(notifsStorage){
					this.notifs = JSON.parse(notifsStorage)
				}
			}
		},
		onShow() {
		},
		methods: {
			settingNav(){
				syczuanNotice.openSetting()
			},
			setChange(type,val) {
				let user_id = this.user_info.user_id
				if(user_id){
					let notif = user_id+'notif'
					let notifsStorage = JSON.parse(JSON.stringify(this.notifs))
					notifsStorage[type] = val
					uni.setStorageSync(notif,JSON.stringify(notifsStorage))
					this.notifs[type] = val
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.cellviewGrop {
		background: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;

		.cellview {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 110rpx;

			&__left {
				display: flex;
				align-items: center;


				&__title {
					font-size: 28rpx;
				}
			}

			&__right {
				display: flex;
				align-items: center;

				&__content {
					font-size: 28rpx;
					color: #61626e;
				}
			}
		}
	}
</style>